<template>
  <div class="levelEquiptment">
    <u-navbar :is-back="true" title="下级设备" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view style="padding: 0rem 0.5rem; display: flex; align-items: center">
          <!-- <view style="
font-size: 0.75rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >员工规则</view> -->
          <!-- <img style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../../style/image/my/bottomArrow.jpg" alt=""> -->
        </view>
      </view>
    </u-navbar>

    <view class="search" :style="{ width: '100%' }">
      <u-search
        placeholder="请输入商户姓名或电话"
        shape="round"
        v-model="keyword"
        :show-action="false"
      ></u-search>
    </view>

    <view class="tabwiperC">
      <u-tabs-swiper
        ref="tabs"
        :list="list"
        active-color="#4dbf92"
        inactive-color=""
        count="count"
        height="120"
        :is-scroll="false"
        :current="current"
        bar-width="80"
        gutter="80"
        @change="tabsChange"
      ></u-tabs-swiper>
    </view>

    <div class="listP" v-for="(item, index) in showData" :key="index">
      <div
        style="
          font-size: 0.79rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #000000;
        "
      >
        代理名称
      </div>
      <div
        style="
          font-size: 0.79rem;
          font-family: PingFang SC;
          font-weight: 300;
          color: #02af74;
        "
      >
        180台
      </div>
    </div>
  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public oneCount = 1;

  public keyword=''

  public list = [
    {
      name: `总数据(${this.oneCount})`,
      count: 5,
    },
    {
      name: "UC456",
      ate_count: 5,
    },
    {
      name: "UC456",
      ate_count: 5,
    },
    {
      name: "UC456",
      ate_count: 5,
    },
    {
      name: "UC789",
      ate_count: 5,
    },
    {
      name: "UC789",
    },
    {
      name: "UC789",
    },
    {
      name: "UC789",
    },
  ];
  public current = 1;

  public showData = [1, 2, 31];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
}
</script>

<style lang="scss" scoped>


.tabwiperC{
  border-bottom: 1px solid #e5e5e5;

}
.levelEquiptment {
  background-color: #f4f5f7;
  height: 100vh;
}

.search {
  width: 100%;
  padding: 0.5rem 0.8rem;
  background-color: white;
  /* background-color:#f4f5f7; */
}

.listP {
  display: flex;
  padding: 1rem;
  background-color: white;
  border-bottom: 1px solid #e5e5e5;
  justify-content: space-between;
}
</style>